<!DOCTYPE html>
<html lang="zh-CN">

<head><meta name="generator" content="Hexo 3.9.0">
    <meta charset="utf-8">
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
    <meta name="referrer" content="no-referrer">
    
        <title itemprop="name">
            
                Web移动端适配基本原理 |
                    
                        墨小蛙
        </title>
        
            <link rel="shortcut icon" href="/images/favicon.ico">
            
                <meta http-equiv="x-dns-prefetch-control" content="on">
                <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Noto+SerifMerriweather|Merriweather+Sans|Source+Code+Pro|Ubuntu:400,700|Noto+Serif+SC" media="all">
                <link rel="dns-prefetch" href="//cdn.jsdelivr.net">
                <link rel="stylesheet" id="saukra_css-css" href="/css/style.css" type="text/css" media="all">
                <link rel="stylesheet" href="/css/lib.min.css" media="all">
                <link rel="stylesheet" href="/css/font.css" media="all">
                <link rel="stylesheet" href="/css/insight.css" media="all">
                <link rel="stylesheet" href="/css/jquery.fancybox.min.css" media="all">
                <link rel="stylesheet" href="/css/zoom.css" media="all">
                <link rel="stylesheet" type="text/css" href="/css/sharejs.css">
                <!--   <link rel="stylesheet" id="saukra_css-css" href="https://2heng.xin/wp-content/cache/autoptimize/css/autoptimize_ad42a61f4c7d4bdd9f91afcff6b5dda5.css
" type="text/css" media="all"> -->
                <script>
                    /*Initial Variables*/
                    var mashiro_option = new Object();
                    var mashiro_global = new Object();
                    mashiro_option.NProgressON = true;
                    /* 
                     * 邮箱信息之类的东西可以填在这里，这些js变量基本都作用于sakura-app.js
                     * 这样的设置仅是为了方便在基于PHP开发的主题中设置js变量，既然移植到了Node上，我想或许可以精简这一逻辑吧
                     */
                    mashiro_option.email_domain = "";
                    mashiro_option.email_name = "";
                    mashiro_option.cookie_version_control = "";
                    mashiro_option.qzone_autocomplete = false;
                    mashiro_option.site_name = "さくら荘その小蛙";
                    mashiro_option.author_name = "小蛙";
                    mashiro_option.site_url = "https://inksmallfrog.gitee.io/";
                    mashiro_option.v_appId = "t6whCN1b96a2XW5eN358hXOC-gzGzoHsz";
                    mashiro_option.v_appKey = "kigfqfKhjVJ0LsaGBKPCowxC";
                    mashiro_option.mathjax = "0";
                    mashiro_option.qq_api_url = "https://api.mashiro.top/qqinfo/";
                    mashiro_option.qq_avatar_api_url = "https://api.mashiro.top/qqinfo/";

                    // mashiro_option.jsdelivr_css_src = "https://cdn.jsdelivr.net/gh/moezx/cdn@3.4.5/css/lib.min.css";
                    // mashiro_option.float_player_on = true;

                    /*End of Initial Variables*/
                </script>
                <script type="text/javascript">
                    var bg = "https://cdn.jsdelivr.net/gh/inksmallfrog/cdn/img/covers_raw/thumb-1920-483919.jpg,https://cdn.jsdelivr.net/gh/inksmallfrog/cdn/img/covers_raw/thumb-1920-331320.jpg".split(",");
                    var bgindex = Math.floor(Math.random() * bg.length);
                    if (!!window.ActiveXObject || "ActiveXObject" in window) { //is IE?
                        alert('朋友，IE浏览器未适配哦~');
                    }
                </script>
                <style type="text/css">
                    .hljs-ln {
                        border-collapse: collapse
                    }
                    
                    .hljs-ln td {
                        padding: 0
                    }
                    
                    .hljs-ln-n:before {
                        content: attr(data-line-number)
                    }
                </style>
                <style type="text/css">
                .site-top .lower nav {
                        display: block !important;
                    }
                    
                    .author-profile i,
                    .post-like a,
                    .post-share .show-share,
                    .sub-text,
                    .we-info a,
                    span.sitename,
                    .post-more i:hover,
                    #pagination a:hover,
                    .post-content a:hover,
                    .float-content i:hover {
                        color: #FE9600
                    }
                    
                    .feature i,
                    .download,
                    .navigator i:hover,
                    .links ul li:before,
                    .ar-time i,
                    span.ar-circle,
                    .object,
                    .comment .comment-reply-link,
                    .siren-checkbox-radio:checked+.siren-checkbox-radioInput:after {
                        background: #FE9600
                    }
                    
                     ::-webkit-scrollbar-thumb {
                        background: #FE9600
                    }
                    
                    .download,
                    .navigator i:hover,
                    .link-title,
                    .links ul li:hover,
                    #pagination a:hover,
                    .comment-respond input[type='submit']:hover {
                        border-color: #FE9600
                    }
                    
                    .entry-content a:hover,
                    .site-info a:hover,
                    .comment h4 a,
                    #comments-navi a.prev,
                    #comments-navi a.next,
                    .comment h4 a:hover,
                    .site-top ul li a:hover,
                    .entry-title a:hover,
                    #archives-temp h3,
                    span.page-numbers.current,
                    .sorry li a:hover,
                    .site-title a:hover,
                    i.iconfont.js-toggle-search.iconsearch:hover,
                    .comment-respond input[type='submit']:hover {
                        color: #FE9600
                    }
                    
                    .comments .comments-main {
                        display: block !important;
                    }
                    
                    .comments .comments-hidden {
                        display: none !important;
                    }
                    
                    background-position:center center;
                    background-attachment:inherit;
                }
                </style>
</head></html>
<body class="page-template page-template-user page-template-page-analytics page-template-userpage-analytics-php page page-id-1297 chinese-font serif isWebKit">
  <div class="scrollbar" id="bar">
  </div>
  <a href="#" class="cd-top faa-float animated"></a>
  <section id="main-container">
    <div class="headertop filter-dot">
  <div id="banner_wave_1"></div>
  <div id="banner_wave_2"></div>
  <figure id="centerbg" class="centerbg">
    <div class="focusinfo no-select">
      <div class="header-tou">
        <a href="https://inksmallfrog.gitee.io/">
          <img src="https://cdn.jsdelivr.net/gh/inksmallfrog/cdn@master/img/avators/conan.jpg">
        </a>
      </div>
      <div class="header-info">
        <p>昨天是小兔子，今天是小鹿</p>
        <div class="top-social_v2">
          <li id="bg-pre">
            <img class="flipx" src="https://cdn.jsdelivr.net/gh/honjun/cdn@1.6/img/other/next-b.svg">
          </li>
          
            
              
                <li>
                  <a href="http://github.com/inksmallfrog" target="_blank" class="social-github" title="github">
                    <img src="https://cdn.jsdelivr.net/gh/inksmallfrog/cdn@master/img/social/github.png">
                  </a>
                </li>
              
            
              
                <li>
                  <a href="http://weibo.com/inksmallfrog/profile?is_all=1" target="_blank" class="social-github" title="微博">
                    <img src="https://cdn.jsdelivr.net/gh/inksmallfrog/cdn@master/img/social/sina.png">
                  </a>
                </li>
              
            
              
                <li>
                  <a href="https://music.163.com/#/user/home?id=90248658" target="_blank" class="social-github" title="网易云">
                    <img src="https://cdn.jsdelivr.net/gh/inksmallfrog/cdn@master/img/social/wangyiyun.png">
                  </a>
                </li>
              
            
              
                <li>
                  <a href="https://www.zhihu.com/people/salieri-67/activities" target="_blank" class="social-github" title="知乎">
                    <img src="https://cdn.jsdelivr.net/gh/inksmallfrog/cdn@master/img/social/zhihu.png">
                  </a>
                </li>
              
            
              
                <li>
                  <a href="mailto:inksmallfrog@gmail.com" class="social-github" title="email">
                    <img src="https://cdn.jsdelivr.net/gh/inksmallfrog/cdn@master/img/social/email.svg">
                  </a>
                </li>
              
            
              
                <li class="wechat">
                  <a href="/#">
                    <img src="https://cdn.jsdelivr.net/gh/inksmallfrog/cdn@master/img/social/qq.png">
                  </a>
                  <div class="wechatInner">
                    <img src="https://cdn.jsdelivr.net/gh/inksmallfrog/cdn@master/img/custom/qq.jpg">
                  </div>
                </li>
              
            
              
                <li class="wechat">
                  <a href="/#">
                    <img src="https://cdn.jsdelivr.net/gh/inksmallfrog/cdn@master/img/social/wechat.png">
                  </a>
                  <div class="wechatInner">
                    <img src="https://cdn.jsdelivr.net/gh/inksmallfrog/cdn@master/img/custom/wechat.jpg">
                  </div>
                </li>
              
            
          
          <li id="bg-next">
            <img src="https://cdn.jsdelivr.net/gh/honjun/cdn@1.6/img/other/next-b.svg">
          </li>
        </div>
      </div>
    </div>
  </figure>
  <div id="video-container" style="">
    <video style="object-fit: fill" id="bgvideo" class="video" video-name="" src="" width="auto" preload="auto">
    </video>
    <div id="video-btn" class="loadvideo videolive">
    </div>
    <div id="video-add">
    </div>
    <div class="video-stu">
    </div>
  </div>
  <div class="headertop-down faa-float animated" onclick="headertop_down()">
    <span>
      <i class="fa fa-chevron-down" aria-hidden="true">
      </i>
    </span>
  </div>
</div>
    <div id="page" class="site wrapper">
      <header class="site-header no-select gizle sabit" role="banner">
  <div class="site-top">
    <div class="site-branding">
      <span class="site-title">
        <span class="logolink moe-mashiro">
          <a href="/">
            <span class="sakurasono">さくら荘その</span>
            <span class="shironeko">小蛙</span>
          </a>
        </span>
      </span>
    </div>
    <div class="searchbox search-form-submit">
      <i class="iconfont js-toggle-search iconsearch icon-search">
      </i>
    </div>
    <div id="show-nav" class="showNav mobile-fit">
      <div class="line line1">
      </div>
      <div class="line line2">
      </div>
      <div class="line line3">
      </div>
    </div>
    <div class="lower-cantiner">
      <div class="lower">
        <nav class="mobile-fit-control hide">
          <ul id="menu-new" class="menu">
            
              <li>
                <a href="/">
                  <span class="faa-parent animated-hover">
                    <i class="fa  fa-fort-awesome faa-shake" aria-hidden="true"></i>
                    首页
                  </span>
                </a>
                
              </li>
            
              <li>
                <a href="/archives">
                  <span class="faa-parent animated-hover">
                    <i class="fa  fa-archive faa-shake" aria-hidden="true"></i>
                    归档
                  </span>
                </a>
                
                  <ul class="sub-menu">
                    
                      <li>
                        <a href="/categories/技术/">
                          <i class="fa fa-code" aria-hidden="true"></i>
                          技术
                        </a>
                      </li>
                    
                      <li>
                        <a href="/categories/生活/">
                          <i class="fa fa-file-text-o" aria-hidden="true"></i>
                          生活
                        </a>
                      </li>
                    
                  </ul>
                
              </li>
            
              <li>
                <a href="javascript:;">
                  <span class="faa-parent animated-hover">
                    <i class="fa  fa-list-ul faa-vertical" aria-hidden="true"></i>
                    清单
                  </span>
                </a>
                
                  <ul class="sub-menu">
                    
                      <li>
                        <a href="/tags/悦读/">
                          <i class="fa fa-th-list faa-bounce" aria-hidden="true"></i>
                          书单
                        </a>
                      </li>
                    
                      <li>
                        <a href="/bangumi/">
                          <i class="fa fa-film faa-vertical" aria-hidden="true"></i>
                          番组
                        </a>
                      </li>
                    
                      <li>
                        <a href="/music/">
                          <i class="fa fa-headphones" aria-hidden="true"></i>
                          歌单
                        </a>
                      </li>
                    
                      <li>
                        <a href="/tags/图集/">
                          <i class="fa fa-photo" aria-hidden="true"></i>
                          图集
                        </a>
                      </li>
                    
                  </ul>
                
              </li>
            
              <li>
                <a href="/comment/">
                  <span class="faa-parent animated-hover">
                    <i class="fa  fa-pencil-square-o faa-tada" aria-hidden="true"></i>
                    留言板
                  </span>
                </a>
                
              </li>
            
              <li>
                <a href="/links/">
                  <span class="faa-parent animated-hover">
                    <i class="fa  fa-link faa-shake" aria-hidden="true"></i>
                    友人帐
                  </span>
                </a>
                
              </li>
            
              <li>
                <a href="/">
                  <span class="faa-parent animated-hover">
                    <i class="fa  fa-leaf faa-wrench" aria-hidden="true"></i>
                    关于
                  </span>
                </a>
                
                  <ul class="sub-menu">
                    
                      <li>
                        <a href="/about/">
                          <i class="fa fa-meetup" aria-hidden="true"></i>
                          我？
                        </a>
                      </li>
                    
                      <li>
                        <a href="/theme-sakura/">
                          <i class="fa iconfont icon-sakura" aria-hidden="true"></i>
                          主题
                        </a>
                      </li>
                    
                      <li>
                        <a href="/lab/">
                          <i class="fa fa-cogs" aria-hidden="true"></i>
                          Lab
                        </a>
                      </li>
                    
                  </ul>
                
              </li>
            
              <li>
                <a href="/atom.xml">
                  <span class="faa-parent animated-hover">
                    <i class="fa  fa-rss faa-pulse" aria-hidden="true"></i>
                    RSS
                  </span>
                </a>
                
              </li>
            
          </ul>
        </nav>
      </div>
    </div>
  </div>
</header>

      <link rel="stylesheet" type="text/css" href="/css/sharejs.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.4.2/tocbot.css">
<div class="pattern-center-blank"></div>

  <div class="pattern-center single-center">
    <!-- 有配图默认渲染第一张 -->
    <div class="pattern-attachment-img lazyload" style="background-image: url(https://cdn.jsdelivr.net/gh/inksmallfrog/cdn@master/img/upload/mobileAdaptation.jpg);" src="https://cdn.jsdelivr.net/gh/honjun/cdn@1.6/img/loader/orange.progress-bar-stripe-loader.svg" data-src="https://cdn.jsdelivr.net/gh/inksmallfrog/cdn@master/img/upload/mobileAdaptation.jpg">
    </div>
    <header class="pattern-header single-header">
      <h1 class="entry-title">
      Web移动端适配基本原理</h1>
      <p class="entry-census">
        <span>
          <a href="">
            <img src="">
          </a>
        </span>
        <span>
          <a href=""></a>
        </span>
        <span class="bull">
        ·</span>
        2017-4-15<span class="bull">
        ·</span>
      <span id="busuanzi_value_page_pv"></span>次阅读</p>
    </header>
  </div>

<div id="content" class="site-content">
  <div id="primary" class="content-area">
    <main id="main" class="site-main" role="main">
      <article id="post-1" class="post-1 post type-post status-publish format-standard has-post-thumbnail hentry category-uncategorized">
        <div class="toc"></div>
        <!--<div class="toc-entry-content"><!-- 套嵌目录使用（主要为了支援评论）-->
        
        <div class="entry-content">
          <p>这几天看了一些移动端适配的方案，来写一下这篇讨论。理解可能有欠缺之处，欢迎指出。</p>
<h1 id="从PC端讲起"><a href="#从PC端讲起" class="headerlink" title="从PC端讲起"></a>从PC端讲起</h1><p>虽然这篇是总结移动端的，但是考虑到像我这种学习前端的萌新都是从PC端开始练起，所以我们就先来看下在PC端做前端开发的情况。</p>
<p>写一个h5页面。</p>
<pre><code class="html">&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;
&lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot;&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;h1&gt;Hello World!&lt;/h1&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>
<p><img src="/image/2017-04-15 22-52-26屏幕截图.jpg" alt="HelloWorld页面"><br>什么？这不是HTML入门的第一个页面么？这有什么看头？</p>
<p>别急呀，我们现在来看这个页面可不是学标签的。作为一名成长中的前端开发人员，在看到页面的时候要习惯性地问自己一些问题的。比如说对这个页面里，h1到底有多宽?</p>
<blockquote>
<p>解决问题的最有效方法是提出最正确的问题</p>
</blockquote>
<a id="more"></a>
<p>分析一下，首先我们知道h1是一个块级元素，那么块级元素的宽度是怎么定义的呢？</p>
<blockquote>
<p>块级元素占据其父元素（容器）的整个空间</p>
</blockquote>
<p>现在，h1有多宽的问题就变成了另一个问题：h1的父元素——也就是说body,有多宽？</p>
<p>因为我们没有定义body，但根据开发经验我们都知道，不就是100%么（不考虑浏览器自带的padding和margin的话）？但是如果是100%，我们知道百分比是相对大小，那么这个100%是相对于哪个元素来说呢？</p>
<p>唔……应该是浏览器宽度吧，body哪里还会有相对的父元素呢？不，确实有，这是因为我们平时开发时，很少关注一个重要的标签，也就是HTML真正的包裹标签——html。</p>
<p>我们做一个实验，在Chrome下F12打开Console，然后给html加一个width:50%，再查看body的宽度，发现body和html具有一样的宽度。<br><img src="/image/2017-04-15 22-43-54屏幕截图.jpg" alt="chrome实验查看html标签与body标签间的关系"><br>也就是说，默认情况下，body的宽度是相对html的100%。那么问题就成了html有多宽呢？这回总该是浏览器的宽度了吧？</p>
<p>没问题，至少，据我所知在<strong>PC端</strong>的情况下没问题。不要担心我欺骗你们，我们后面会用一些实验证明这一点的。</p>
<p>不过这句话的意思是，在移动端就不是这样了么？html的默认宽度不是浏览器的宽度还能是什么？<br>是什么呢？亲自看一下吧。</p>
<h2 id="阶段结论"><a href="#阶段结论" class="headerlink" title="阶段结论"></a>阶段结论</h2><ol>
<li>在PC端下，html默认宽度恒等于浏览器宽度</li>
</ol>
<h1 id="转战移动端"><a href="#转战移动端" class="headerlink" title="转战移动端"></a>转战移动端</h1><p>我这里的意思不是说把上面的网页拷贝到手机上运行，那样太麻烦了，会让人放弃前端开发的。庆幸Chrome里面为开发者提供了一个移动端模拟模拟器。</p>
<p>还是上面那个网页，我们使用用Chrome Console里自带的模拟移动端的功能查看效果（Win键盘快捷键Ctrl+Shift+M）<br><img src="/image/2017-04-16 14-25-08屏幕截图.png" alt="chrome模拟手机页面"><br>我们可以在模拟界面最上面看到我现在模拟的是iphone5的手机(啊，还是很希望有一部真的果机来测试2333)，它的屏幕大小是320x568px，后面的100%意思是在浏览器里显示的屏幕大小，是它在真实世界里大小的100%。</p>
<p>然后按照PC端的思路，html是浏览器的大小，在这里就该是320px，我们看一下。<br><img src="/image/2017-04-15 23-01-28屏幕截图.jpg" alt="移动端html宽度计算"><br>嗯？发生了什么，好像和想象中的不太一样……我们看到在320px宽度的设备上，html标签宽度的计算结果是980px？这难道只是Chrome移动端计算元素宽度时的BUG？</p>
<p>嗯，让我们修改一下html的代码。我想你应该知道在PC端如果想让一个元素隐藏除了用display:none或者visibility:hidden（PS：如果你不知道这两个方法，建议研究一下它们的区别。<a href="http://stackoverflow.com/questions/133051/what-is-the-difference-between-visibilityhidden-and-displaynone" target="_blank" rel="noopener">What is the difference between visibility:hidden and display:none?</a>）还可以把它移动到可见范围之外，比如在1080宽的屏幕上可以left:1080px（当然……没人会蠢到写这种东西吧，这里只是为了实验。如果想实现这种效果请不要使用px这种绝对长度作为单位），我们希望在320px宽度的手机上也实现类似的效果。</p>
<pre><code class="html">&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;
&lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot;&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;h1&gt;Hello World!&lt;/h1&gt;
    &lt;p style=&quot;position: absolute; left: 600px&quot;&gt;I shouldn&#39;t be seen under the smartphone whose device-width is lower than 600px&lt;/p&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>
<p>然后假设你忘了亲自看一眼就自信的把它提交给了测试……不出1分钟，你就会获得一个BUG反馈<br><img src="/image/2017-04-15 23-17-29屏幕截图.jpg" alt="这是个什么鬼？怎么能让用户看到这种东西？！"><br>这是什么鬼？怎么能让用户看到这种东西？！</p>
<blockquote>
<p>写前端在时间允许的情况下，请务必多调试多调试多调试，在100种设备上调试都不为过</p>
</blockquote>
<p>很好，现在你应该理解了，html的宽度在移动端的奇怪现象了吧。<br>但是如果这个现象真的不合理，那么全世界的程序员不会这么长时间都坐视不理的。</p>
<p>那么现在的问题是：为什么要在一个320px宽的设备上把html宽度设定成“不规矩”的值呢？</p>
<h2 id="阶段结论-1"><a href="#阶段结论-1" class="headerlink" title="阶段结论"></a>阶段结论</h2><ol>
<li>在移动端下，html宽度不一定等于浏览器宽度</li>
</ol>
<h1 id="移动端设备厂商-amp-移动端浏览器厂商：我们希望给用户尽可能好的视觉体验"><a href="#移动端设备厂商-amp-移动端浏览器厂商：我们希望给用户尽可能好的视觉体验" class="headerlink" title="移动端设备厂商 &amp; 移动端浏览器厂商：我们希望给用户尽可能好的视觉体验"></a>移动端设备厂商 &amp; 移动端浏览器厂商：我们希望给用户尽可能好的视觉体验</h1><p>现在暂时回到几年前，那时候以iPhone和Android为代表的智能机还没出现在市场。没有多少人能想到，现在的我们可以抱着装在口袋里的东西浏览各种高端酷炫的网页，手机上能把html加载出来再把基本的CSS支持一下就已经很了不起了。所以说当然也没有人闲的无聊会想着去开发一些能够在320px宽度下正常显示的页面。</p>
<p>所以当智能机出现的时候，设备厂商和浏览器厂商费尽心思要做的第一件事儿就是，想办法让PC上那些横向设计的html，正确且正常的在320px宽（甚至更窄）的设备上显示。WOW！这个想法很棒，我们只要把大的页面映射到小的屏幕上就可以解决问题了。</p>
<p>映射？这似乎是一个新概念，但是我们大概很久以前就在接触它了。</p>
<blockquote>
<p>如果你学过一些图像处理的知识，你应该知道要把一张2*2像素的图片显示到4*4像素的设备上，最简单的方法只需要把原始图片每1个像素(1*1格)，复制到设备中的4个像素(2*2格)上就可以了,这就是一种基本的1=&gt;2映射。<br>当然也可以反过来把4*4像素的图片显示在2*2的设备上，只需要只取奇/偶数行奇/偶数列，或者做一些均值计算就可以了，这就是一种2=&gt;1映射</p>
</blockquote>
<p>但是还剩一个问题……我们怎么知道html应该有多宽？我们刚才知道在PC端html的宽度是由浏览器宽度决定的？但是在移动端呢，应该让html取多宽？</p>
<p>至于这一点的答案……认真考虑一下其实就能得出，具体多宽其实无所谓，只要足够宽能够防止html下的元素挤在一起就好，当然如果太宽的话，在“初始缩放”映射后，就会导致那些按绝对尺寸定义的元素显得太小。</p>
<p>不过比起随机选一个“足够宽”的数，为所有网页统一定义一个默认宽度明显比较方便。</p>
<p>遗憾的是，这个数字怎么选择并没有一个固定的标准。各个设备厂商&amp;各个浏览器厂商完全可以由着自己的性子来。它们一般都选在768px ~ 1024px之间的一个数，大多数都选择了980px。</p>
<p>我们现在不打算讨论视图的问题，所以我们姑且叫这个数字为default_html_width。</p>
<p>这样，页面在移动端加载时，移动端浏览器会将html.width设定为default_html_width，之后为页面建立一个default_html_width =&gt; device_width的映射关系，这个映射关系被苹果公司叫做“初始缩放”，虽然我觉得这个名字……很糟糕(它和下面说的缩放混为一谈了)，但大家现在都么叫。</p>
<p>我们现在可以考虑在浏览器加载HTML时，发生了如下对话</p>
<blockquote>
<p>PC端<br><br>  HTML页面妹子：浏览器大叔，我要请你帮我绘制一下，请问你能给我的最大的绘制空间是多少呀？<br><br>  浏览器大叔：哦，好的，我查一下，我现在有1080px的宽度可以让你绘制 <br><br>  HTML页面妹子：嗯嗯，我知道了，谢谢大叔。（把1080作为html标签的宽度）</p>
</blockquote>
<blockquote>
<p>移动端<br><br>  HTML页面妹子：浏览器大叔，我要请你帮我绘制一下，请问你能给我的最大的绘制空间是多少呀？<br><br>  浏览器大叔：哦，好的，我查一下……（……怎么只有320px，不够妹子用啊！好在爹爹以前教导我，遇到这种情况，就告诉妹子有980px，然后我来把它映射到320px就好了）……哦，我现在有980px的宽度可以给你绘制<br><br>  HTML页面妹子：嗯嗯，我知道了，谢谢大叔。（把980作为html标签的宽度）<br><br>  （之后HTML妹子在绘制的时候，浏览器大叔都会把HTML妹子绘制的像素映射到设备实际的像素）</p>
</blockquote>
<p>那么现在事情就变得有意思了，比如说，CSS设置的一个width:100px的button，在宽度为320px宽的设备下实际占多少像素呢？</p>
<p>哈，这个数学题还是难不倒我们的。如果按照default_html_width是980px考虑的话，那么实际像素x有映射关系x / 100 = 320 / 980, x = 33px。取整是因为没人（也没有机器）知道怎么渲染半个像素。</p>
<p>不过这个按钮有多大或许不甚重要（不过你要是不小心弄出了一个超级大的按钮，估计设计师会追着打你……）,这里更重要的东西是<strong>写在代码里的像素需要经过映射才能变为设备上的像素</strong>。</p>
<p>这就有点复杂了，不过问题还没完……</p>
<h2 id="阶段结论-2"><a href="#阶段结论-2" class="headerlink" title="阶段结论"></a>阶段结论</h2><ol>
<li>设备厂商&amp;浏览器厂商会为网页选定一个default_html_width，并以此为基础建立“初始缩放”映射关系</li>
<li>写在代码里的像素需要经过映射才能变为设备上的像素</li>
</ol>
<h1 id="天呀，这个网页上的字实在是太小了"><a href="#天呀，这个网页上的字实在是太小了" class="headerlink" title="天呀，这个网页上的字实在是太小了"></a>天呀，这个网页上的字实在是太小了</h1><p>在default_html_width = 980px的情况下，对于正常情况下一个16px的汉字（它在PC端显示很正常），放到移动端占据的真实像素就是5px。<br><img src="/image/2017-04-16 15-15-10屏幕截图.png" alt="优雅的PC端"><br><img src="/image/2017-04-16 15-16-24屏幕截图.png" alt="你能看见这个页面到底说了什么么？"><br>下面的这个显示的效果，就是真实世界里的效果，没有进行缩放，你也可以拿真机试试。别说是文字了，就连标题读起来都心累。</p>
<p>我们要理解，之所以移动端显示PC的页面要经过“初始缩放”映射。是<strong>让用户能知道页面各个位置的布局和功能</strong>。</p>
<p>但是至于看清了布局能不能看清文字……单凭“初始缩放”映射还真解决不了这个问题，所以用户就会双击触屏或者进行手势操作，对他感兴趣的部分进行放大（当然之后很可能还会缩小回原来的样子）……</p>
<p>嗯……等等……放大……放大……放大？</p>
<p>我们对比一下在PC端的经验，有些时候我们在浏览网页的时候偶尔也会调节浏览器的大小。这也是一种放大缩小的行为，那么这个行为是不是和手机端的缩放原理一样呢？</p>
<p>我们知道在PC上，如果为body的直接子元素定义相对宽度的话，当浏览器大小改变时（更准确地说是浏览器大小改变引发了html尺寸的改变），该子元素占据的像素数会被重新计算。我们看一下这个过程（仅在PC端有效）：</p>
<ol>
<li>定义相对宽度的元素是根据其父节点宽度的像素值计算而来的</li>
<li>当父节点宽度改变的时候子节点会重新计算宽度像素值</li>
<li>html的宽度默认恒等于浏览器宽度</li>
<li>浏览器宽度改变时，html宽度改变，body被重新计算，body下所有定义相对宽度的子元素均重新计算。</li>
</ol>
<blockquote>
<p>Talk is cheap, show me the code</p>
</blockquote>
<p>我们来实际看看浏览器大小改变时的效果。</p>
<p>首先把之前的代码改一下。我们来准备一个占body100%大小的ul，为了能观察到变化情况，在下面添加10个li，内容对应0-9，每个宽度占据ul的10%。</p>
<p>哦，我忘了li是块级元素，不能并排在同一行。不过没关系，我们把它改成行内块级（display:inline-block）元素，这样就可以在显示在行内的情况下修改它的宽度。（ps:行内非替换元素修改width属性无效，如果你不知道，请看)</p>
<ol>
<li><a href="http://stackoverflow.com/questions/12468176/what-is-a-non-replaced-inline-element" target="_blank" rel="noopener">what is a non-replaced inline element?</a></li>
<li><a href="http://maxdesign.com.au/articles/inline/" target="_blank" rel="noopener">Inline elements and padding</a></li>
<li><a href="https://www.w3.org/TR/REC-CSS2/visudet.html#Computing_widths_and_margins" target="_blank" rel="noopener">Visual formatting model details</a></li>
</ol>
<p>另外，在设置inline-block的时候需要特别注意标签间的空格以及分行，因为它们都会被浏览器当做内部的文本节点” “（占据1em的大小）被渲染出来。</p>
<p>最后，为了让每个元素占据的空间更明显，我们给它设置一个1px的border。但这会导致li的盒模型在content-area.width = 10% * ul.width的基础上，左右两边各多出1px<br>那么10个li合起来就占据了(10% * ul.width + 2) * 10的宽度，很明显超出父元素20px，导致换行。</p>
<p>这时候我们可以设置box-sizing:border-box;意思就是width:10%这个宽度包含了content,padding,border的全部内容。（也可以用calc函数动态计算width）</p>
<blockquote>
<p>参见<br><a href="http://www.w3school.com.cn/cssref/pr_box-sizing.asp" target="_blank" rel="noopener">CSS3 box-sizing 属性</a><br><a href="https://www.w3schools.com/cssref/func_calc.asp" target="_blank" rel="noopener">CSS3 calc() 函数</a></p>
</blockquote>
<p>然后我们的样式有点多了，最好把它们都提出来，标签内嵌样式实在是太丑陋了。下面是修改后的代码</p>
<pre><code class="html">&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;
&lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot;&gt;
    &lt;style&gt;
       .p_should_hide{
            position: absolute;
            left: 600px;
       }
       .100button{
            width: 100px;
       }
       .16font_size{
            font-size: 16px;
       }
       ul{
            width: 100%;
            padding: 0;
            margin: 0;
       }
       ul li{
            display: inline-block;
            width: 10%;
            box-sizing: border-box;
            border: 1px solid #000;
       }
    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;h1&gt;Hello World!&lt;/h1&gt;
    &lt;p class=&quot;p_should_hide&quot;&gt;I shouldn&#39;t be seen under the mobile browser&lt;/p&gt;
    &lt;button class=&quot;100button&quot;&gt;我是100px宽的按钮&lt;/button&gt;
    &lt;p class=&quot;16font_size&quot;&gt;设计师给我的设计方案是16px,看起来在PC上很优雅&lt;/p&gt;
    &lt;ul&gt;
        &lt;li&gt;0&lt;/li&gt;&lt;li&gt;1&lt;/li&gt;&lt;li&gt;2&lt;/li&gt;&lt;li&gt;3&lt;/li&gt;&lt;li&gt;4&lt;/li&gt;&lt;li&gt;5&lt;/li&gt;&lt;li&gt;6&lt;/li&gt;&lt;li&gt;7&lt;/li&gt;&lt;li&gt;8&lt;/li&gt;&lt;li&gt;9&lt;/li&gt;
    &lt;/ul&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>
<p>我们可以看到在PC下，窗口放小的过程中，html一直等于窗口的宽度，并且ul,li的宽度一直被重新计算<br><img src="/image/2017-04-16 15-29-32屏幕截图.png" alt="在PC下将窗口调到最小_原理"><br>导致所有计算结果的原因归根结底就是PC端html的宽度恒等于浏览器的宽度。</p>
<p>让我们回到移动端，html的宽度……额……和浏览器的宽度，有一个“初始映射关系”。而且在缩放过程中，移动端浏览器的宽度也根本不会变啊。</p>
<p>所以结论很明显，移动端的缩放机制和PC端浏览器窗口大小改变的原理绝对不一样。</p>
<p>那么新的问题又来了，移动端缩放的过程中到底发生了什么？</p>
<h2 id="阶段结论-3"><a href="#阶段结论-3" class="headerlink" title="阶段结论"></a>阶段结论</h2><ol>
<li>html元素宽度的改变的根本原因在于html宽度的改变</li>
<li>移动端的缩放机制和PC端浏览器窗口大小改变的原理不一样</li>
</ol>
<h1 id="PC上的缩放"><a href="#PC上的缩放" class="headerlink" title="PC上的缩放"></a>PC上的缩放</h1><p>移动端缩放这个问题，还是有点复杂。</p>
<p>但我们先不管移动端，只考虑缩放的问题。</p>
<p>不知道你有没有注意过，其实现代的PC浏览器上一般都会有缩放的功能，这是为了满足一些视力不太好的用户（当然有时候也能帮助一些设计尺寸很反人类的网页）的需求</p>
<p>在Chrome下按Ctrl+”+”/“-“,或者Ctrl+鼠标滑轮滚动就能实现页面的缩放。</p>
<p>我们对之前的页面进行175%的缩放<br><img src="/image/2017-04-16 15-31-43屏幕截图.png" alt="PC端175%缩放效果"><br>哈，这下可就麻烦了，我们在上面讨论中的第一个结论就是<strong>PC端下html默认宽度恒等于浏览器宽度</strong>，但是这里明显出了问题，我现在的浏览器宽度是1366px，但是html的计算宽度却只有780.57px。看来我们需要修改一下最初的结论</p>
<blockquote>
<p>在PC端不进行缩放的情况下，html默认宽度恒等于浏览器宽度</p>
</blockquote>
<p>这个结论看起来比之前的那个更复杂了，但是其实这并不会造成太大的问题。因为PC端在布局合理的情况下，很少有用户会开着缩放浏览你的页面呢？</p>
<p>在这里真正有启发性的是缩放的本质，我们计算一下，1366 / 780.57，我的计算器显示为1.750003203，也就是我们的缩放比例。</p>
<p>现在我们可以来梳理一下PC端缩放的过程了：</p>
<ol>
<li>用户通过缩放工具选择了某个缩放比例</li>
<li>计算缩放后html.width = browser.width / scaleRatio</li>
<li>计算html后代元素的尺寸</li>
<li>重设映射关系html.width =&gt; browser.width<br>关于前面三点都是旧概念了，但这里的第四点重置了映射关系！所以缩放本质上讲就是一种映射关系的改变。</li>
</ol>
<h2 id="阶段结论-4"><a href="#阶段结论-4" class="headerlink" title="阶段结论"></a>阶段结论</h2><ol>
<li>在PC端不进行缩放的情况下，html默认宽度恒等于浏览器宽度</li>
<li>PC端缩放会改变html.width</li>
<li>缩放本质上讲就是一种映射关系的改变。</li>
</ol>
<h1 id="移动端的用户缩放"><a href="#移动端的用户缩放" class="headerlink" title="移动端的用户缩放"></a>移动端的用户缩放</h1><p>好啦，理解了缩放，再来看移动端缩放。</p>
<p>还是拿上面的页面，我们利用Chrome模拟器在移动端进行放大测试（在Chrome模拟器调试时，双击页面进行放大）<br><img src="/image/2017-04-16 12-36-30屏幕截图.png" alt="Chrome模拟器中进行调试用户缩放"><br>唔，这个显示的效果太小了，但我不想利用CSS把它变大，那样不定会导致更麻烦的属性计算问题。</p>
<p>但亲自看一遍放大过程或者数格子就能看出来，在移动端放大后只显示了8.5个格子，查看html的宽度，它还是980px。<br><img src="/image/2017-04-16 13-42-18屏幕截图.png" alt="Chrome模拟器中进行调试用户缩放_html宽度"><br>唔……这就麻烦了，同样是缩放，PC端改变了html的宽度而移动端却没有这么做……但仔细考虑一下这样是合理的，理由就是移动端的浏览器宽度通常很窄。</p>
<p>移动端的浏览器宽度通常很窄，如果在缩放时执行了html.width = origin_html.width / scaleRatio，那么下面的所有定义了相对宽度的元素都会被缩放，然后再进过html.width =&gt; browser.width的映射，那么页面上所有的元素就会挤在你小小的屏幕上，即便它们都被放大到很大的倍数……想象一下，那简直就是一锅粥。(tip:如果你想象不到那会有多造，把你的浏览器尺寸拉到最小，然后使用缩放工具试一下你就知道了……)</p>
<p>我们现在解决原始的问题移动端用户缩放时发生了什么：</p>
<ol>
<li>用户通过手势（扩大手势，缩小手势或者双击）进行</li>
<li>重置映射关系为 (html.width / scaleRatio) =&gt; browser.width</li>
</ol>
<p>我们还是看那个CSS中定义为100px的button，移动端尺寸宽320px，default_html_width为980px，根据之前的计算，这个按钮在不经过缩放的情况下占据实际像素33px。</p>
<p>现在用户进行了一个放大2倍的手势操作。</p>
<blockquote>
<p>初始映射关系：980px =&gt; 320px<br>  放大后映射关系： (980 / 2)px =&gt; 320px</p>
</blockquote>
<p>现在再来计算button显示的宽度x: x / 100 = 320 / 490, 得x = 65px。</p>
<p>太棒了，现在我们可以精确知道用户缩放以后的像素了。可是先别急，因为只是知道这个像素……其实……基本上可以说没有任何意义。</p>
<h2 id="阶段结论-5"><a href="#阶段结论-5" class="headerlink" title="阶段结论"></a>阶段结论</h2><ol>
<li>移动端用户缩放时不会改变html.width，只会修改映射关系。</li>
</ol>
<h1 id="北京到杭州的距离是……1568……px"><a href="#北京到杭州的距离是……1568……px" class="headerlink" title="北京到杭州的距离是……1568……px?"></a>北京到杭州的距离是……1568……px?</h1><p>作为前端开发人员，我们和设计师交流的必然会涉及px。这个按钮100px，这个div要左移1px等等。而且经过上面的讨论，我们也知道了，<strong>在CSS中写好的像素需要经过映射才呈现出实际的像素</strong>。</p>
<p>不过我还是有个问题，就是到底需要多大的按钮，才能保证用户很容易用手指点中？</p>
<p>略微思考后，你可能想回答某一个像素值，而且它应该是基于实际像素的，但这个像素值有实际意义么？<br>其实换个角度想，这个问题正确的问法应该是，用户的手指一般有多粗？既然如此……像素值有意义嘛？<br>这就好比我问你北京到杭州有多远，你思考了一阵告诉我……1568……px。</p>
<p>很明显，现在我们又引出了新的问题，就是1px，在现实世界里，到底该有多长？老师在学校没有教过你这类单位转换，当然也不可能在某某标准单位定义里找到相关的东西。</p>
<p>也就是说，1px的实际长度完全可以是任意的！</p>
<p>好吧，我们好不容易解决了缩放的问题，确定了实际显示的像素大小，但现在却被告知这个大小完全没有意义，它可能代表1cm,1m甚至1km……</p>
<p>怎么办呢？我们完全可以要求全世界的人，规定一个统一的换算单位，比如1px=1cm。但这明显不合理，比如说你想要显示一张1080*763的图片，你就必须购买一个1080*763cm的设备……要不然全世界只有少的可怜的几种固定大小的图片，要不然你就得为了欣赏各种图片买齐各种大小的设备……</p>
<p>如果你以前做过任何和图像有关的事情，或者你在学计算机的时候学习过显示器的知识，你就应该知道有一个叫<a href="https://zh.wikipedia.org/wiki/%E6%AF%8F%E8%8B%B1%E5%AF%B8%E5%83%8F%E7%B4%A0" target="_blank" rel="noopener">图像分辨率</a>的概念（为了把它和显示分辨率区别，一般都叫它像素密度……但我觉得分辨率的率本来就该含有密度的意思），它代表了每个单位长度中包含的像素数，但遗憾的是，它的单位长度用的是英寸……作为中国人，我对英寸这个概念实在是没什么亲切感，为了便于后面的理解，请允许我在这篇文章里讨论细节的时候把单位长度换成cm（其实无所谓啦，只是个等比例换算问题而已）。</p>
<p>我们这里就假设有一个宽10cm，高20cm的设备，它的像素密度是32px/cm，所以说它的像素为320*640，我们就叫它设备A吧。<br>还有一个同样宽10cm，高20cm的设备，它的像素密度是64px/cm，像素就是640*1280，我们叫它设备B。</p>
<p>我们来看看那个CSS定义的100px的button在这两个设备上会怎么被映射？</p>
<blockquote>
<p>A设备：<br>default_html_width = 980px<br>映射关系： 980 =&gt; 320<br>实际像素： x / 100 = 320 / 980 =&gt; x = 33px<br>实际长度： l = 33px / 32(px/cm) = 1cm</p>
</blockquote>
<blockquote>
<p>B设备：<br>default_html_width = 980px<br>映射关系： 980 =&gt; 640<br>实际像素： x / 100 = 640 / 980 =&gt; x = 65px<br>实际长度： l = 65px / 64(px/cm) = 1cm</p>
</blockquote>
<p>WOW！我们发现只要设备厂家和浏览器厂家给出了相同的default_html_width，那么按照映射关系，即便button实际占据的像素数不同，但最后的实际长度基本上是相等的。</p>
<p>不过实际像素的不同会有什么影响呢？比如说我们的button用了一个从左向右的渐变色，再假设渐变方向上的每个元素都有一个新的颜色值。那么对于设备A，就有33种颜色，而设备B有65种颜色。所以这就是高分辨率的意义。</p>
<p>最后我们整理一下在没有用户缩放影响下的实际长度计算公式</p>
<blockquote>
<p>CSS_px =&gt; CSS中定义的像素<br>device_px =&gt; 设备的像素数<br>default_html_width =&gt; 设备厂商&amp;浏览器厂商给定的默认html宽度<br>PPI =&gt; 设备像素密度<br>device_length =&gt; 设备实际长度</p>
<p>实际像素： device_px * CSS_px / default_html_width<br>实际长度： (device_px * CSS_px) / (PPI * default_html_width) = device_length * CSS_px / default_html_width</p>
</blockquote>
<p>好，现在我们把这篇文章里的两个主要话题结合起来讨论一个主题作为结尾：</p>
<ol>
<li>移动端的缩放</li>
<li>移动端的像素密度</li>
</ol>
<p>我们要讨论的是，如何充分利用高分辨率屏幕的分辨率。出于某些原因（下一篇我们会讨论这些原因），default_html_width = 320px</p>
<p>然后我这里有一张宽320px的图像，我希望让它显示在页面最上面并且充满浏览器的宽度。</p>
<p>根据之前学会的计算方法，我们很容易得到：</p>
<blockquote>
<p>A设备：<br>映射关系： 320 =&gt; 320<br>实际像素： x / 320 = 320 / 320 =&gt; x = 320px<br>实际长度： l = 320px / 32(px/cm) = 10cm</p>
</blockquote>
<blockquote>
<p>B设备：<br>映射关系： 320 =&gt; 640<br>实际像素： x / 320 = 640 / 320 =&gt; x = 640px<br>实际长度： l = 640 / 64 = 10cm</p>
</blockquote>
<p>看起来似乎没什么问题。但是……</p>
<blockquote>
<p>用户利益至上</p>
</blockquote>
<p>我们可以看到，一张320px的图片，在设备B上却实际占据了640px的像素数。换句话说，用户花钱买了高分辨率的设备，就是希望能有更好的用户体验，但是这里却给了他们和设备A相同的结果……（甚至更糟糕……很多图片因为强行放大会变的很奇怪）</p>
<p>站在你的用户的角度考虑，这肯定不合理。那么我们可以为B设备的用户提供更清晰的图片嘛？比如说宽640px的图片。</p>
<blockquote>
<p>B设备：<br>实际像素： x / 640 = 640 / 320 =&gt; x = 1280px<br>实际长度： l = 1280 / 64 = 20cm</p>
</blockquote>
<p>Oh!太糟糕了，这样子的话在设备A，B上显示的结果就不一致了。</p>
<p>怎么办呢？可不可以利用缩放把图片缩放0.5倍？当然不行……你可以算一下，因为移动端缩放不影响html.width，所以页面内所有元素宽度都不变，然而你把映射关系改成了原像素的0.5倍，那么整个页面的所有元素都会被缩小0.5倍。所以A，B设备之间还是不一致。</p>
<p>但如果我们修改的是html.width呢？或者说，我们修改了B设备的default_html_width。比如说把它改成640px，是不是就解决问题了。</p>
<p>当然，所以这里的正确问题是能不能修改default_html_width的值，或者换句话说，能不能修改“初始缩放”映射关系呢？</p>
<p>好吧，关于这个的答案当然可以，但是具体的内容就放到下一篇讲吧。</p>
<h2 id="阶段结论-6"><a href="#阶段结论-6" class="headerlink" title="阶段结论"></a>阶段结论</h2><ol>
<li>显示在设备上的实际像素并不代表用户最终见到的尺寸</li>
<li>在没有缩放的情况下，影响最终用户见到的尺寸的因素包括：设备长度，CSS定义，default_html_width</li>
</ol>
<h1 id="总结结论"><a href="#总结结论" class="headerlink" title="总结结论"></a>总结结论</h1><ol>
<li>在PC端不进行缩放的情况下，html默认宽度恒等于浏览器宽度</li>
<li>在移动端下，设备厂商&amp;浏览器厂商会为网页选定一个default_html_width作为默认html.width，并以此为基础建立“初始缩放”映射关系:default_html_width =&gt; device_width</li>
<li>写在代码里的像素需要经过映射才能变为设备上的像素</li>
<li>缩放本质上讲就是一种映射关系的改变。</li>
<li>html元素宽度的改变的根本原因在于html宽度的改变</li>
<li>移动端的缩放机制和PC端浏览器窗口大小改变的原理不一样</li>
<li>PC端缩放会改变html.width</li>
<li>移动端用户缩放时不会改变html.width，只会修改映射关系。</li>
<li>显示在设备上的实际像素并不代表用户最终见到的尺寸</li>
<li>在没有缩放的情况下，影响最终用户见到的尺寸的因素包括：设备长度，CSS定义，default_html_width</li>
</ol>

        </div>
        <!-- .entry-content -->
        <div class="single-reward">
          <div class="reward-open">赏
            <div class="reward-main">
              <ul class="reward-row">
                <li class="alipay-code"><img src="https://cdn.jsdelivr.net/gh/inksmallfrog/cdn@master/img/custom/donate/AliPayQR.jpg"></li>
                <li class="wechat-code"><img src="https://cdn.jsdelivr.net/gh/inksmallfrog/cdn@master/img/custom/donate/WeChanQR.jpg"></li>
              </ul>
            </div>
          </div>
        </div>
        <div style="text-align:center; width: 100%" class="social-share share-mobile" data-disabled="diandian, tencent"></div>
        <footer class="post-footer">
          <div class="post-lincenses"><a href="https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh" target="_blank" rel="nofollow"><i class="fa fa-creative-commons" aria-hidden="true"></i> 知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议</a></div>
          <div class="post-tags">
          </div>
          <div class="post-share">
            <div class="social-share sharehidden share-component"></div>
            <i class="iconfont show-share icon-forward"></i>
          </div>
        </footer><!-- .entry-footer -->
      </article>
      <!-- #post-## -->
      <div class="toc" style="background: none;"></div>
      <section class="post-squares nextprev">
        
          
            <div class="post-nepre half previous">
          
            <a href="/2017/04/16/JS模块化规范/" rel="prev">
              <div class="background">
                <img class="lazyload" src="https://cdn.jsdelivr.net/gh/honjun/cdn@1.6/img/loader/orange.progress-bar-stripe-loader.svg" data-src="https://cdn.jsdelivr.net/gh/inksmallfrog/cdn@master/img/upload/module.jpg" style="width: 100%; height: 100%; object-fit: cover; pointer-events: none;" onerror="imgError(this,3)" src="https://cdn.jsdelivr.net/gh/inksmallfrog/cdn@master/img/upload/module.jpg">
              </div>
              <span class="label">
              Previous Post</span>
              <div class="info">
                <h3>
                JS模块化规范</h3>
                <hr>
              </div>
            </a>
          </div>
        
        
          
            <div class="post-nepre half next">
          
            <a href="/2017/03/06/CSS居中方案/" rel="next">
              <div class="background">
                <img class="lazyload" src="https://cdn.jsdelivr.net/gh/honjun/cdn@1.6/img/loader/orange.progress-bar-stripe-loader.svg" data-src="https://cdn.jsdelivr.net/gh/inksmallfrog/cdn@master/img/upload/center.jpg" style="width: 100%; height: 100%; object-fit: cover; pointer-events: none;" onerror="imgError(this,3)" src="https://cdn.jsdelivr.net/gh/inksmallfrog/cdn@master/img/upload/center.jpg">
              </div>
              <span class="label">
              Next Post</span>
              <div class="info">
                <h3>
                CSS居中方案</h3>
                <hr>
              </div>
            </a>
          </div>
        
      </section>
      
<div id="vcomments"></div>
<script>
  window.onload = function(){
      var valine = new Valine();
      valine.init({
        el: '#vcomments',
        appId: "t6whCN1b96a2XW5eN358hXOC-gzGzoHsz",
        appKey: "kigfqfKhjVJ0LsaGBKPCowxC",
        path: window.location.pathname,
        placeholder: "你是我一生只会遇见一次的惊喜 ..."
      })
  }
</script>

      <section class="author-profile">
        <div class="info" itemprop="author" itemscope="" itemtype="http://schema.org/Person">
          <a href="" class="profile gravatar"><img src="" itemprop="image" alt="" height="70" width="70"></a>
          <div class="meta">
            <span class="title">Author</span>
            <h3 itemprop="name">
            <a href="" itemprop="url" rel="author"></a>
            </h3>
          </div>
        </div>
        <hr>
        <p><i class="iconfont icon-write"></i></p>
      </section>
    </main><!-- #main -->
  </div><!-- #primary -->
</div>



    </div>    
    <div class="ins-search">
    <div class="ins-search-mask"></div>
    <div class="ins-search-container">
        <div class="ins-input-wrapper">
            <input type="text" class="ins-search-input" placeholder="请输入关键词..."/>
            <span class="ins-close ins-selectable"><i class="fa fa-times-circle"></i></span>
        </div>
        <div class="ins-section-wrapper">
            <div class="ins-section-container"></div>
        </div>
    </div>
</div>
<script>
(function (window) {
    var INSIGHT_CONFIG = {
        TRANSLATION: {
            POSTS: '文章',
            // PAGES: '页面',
            CATEGORIES: '分类',
            TAGS: '标签',
        },
        ROOT_URL: '/',
        CONTENT_URL: '/content.json',
    };
    window.INSIGHT_CONFIG = INSIGHT_CONFIG;
})(window);
</script>
    <!-- <footer id="footer">
  
  <div class="outer">
    <div id="footer-info" class="inner">
      &copy; 2020 墨小蛙<br>
      powered_by <a href="http://hexo.io/" target="_blank">Hexo</a>
    </div>
  </div>
</footer> -->
<footer id="colophon" class="site-footer" role="contentinfo">
  <div class="site-info">
    <div class="footertext">
      <div class="img-preload">
        <img src="https://cdn.jsdelivr.net/gh/honjun/cdn@1.6/img/other/wordpress-rotating-ball-o.svg">
        <img src="https://cdn.jsdelivr.net/gh/honjun/cdn@1.6/img/other/disqus-preloader.svg">
      </div>
      <p style="color: #666666;">&copy 2018</p>
    </div>
    <div class="footer-device">
    <p style="font-family: 'Ubuntu', sans-serif;">
        <span style="color: #b9b9b9;">Theme <a href="https://github.com/honjun/hexo-theme-sakura" target="_blank" style="color: #b9b9b9;;text-decoration: underline dotted rgba(0, 0, 0, .1);">Sakura</a> <i class="iconfont icon-sakura rotating" style="color: #ffc0cb;display:inline-block"></i> by <a href="https://2heng.xin/" target="_blank" style="color: #b9b9b9;;text-decoration: underline dotted rgba(0, 0, 0, .1);">Mashiro</a>&<a href="https://www.hojun.cn/" target="_blank" style="color: #b9b9b9;;text-decoration: underline dotted rgba(0, 0, 0, .1);">Hojun</a>, Powered by Hexo, Hosted by Coding Pages</a>
        </span>
      </p>
    </div>
  </div><!-- .site-info -->
</footer>



<!-- <script src="/js/tocbot.js"></script> -->
<script type="text/javascript" src="/js/lib.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js"></script>
<script type="text/javascript" src="/js/InsightSearch.js"></script>
<script type="text/javascript" src="/js/jquery.fancybox.min.js"></script>
<script type="text/javascript" src="/js/zoom.min.js"></script>
<script type="text/javascript" src="/js/sakura-app.js"></script>
<script src="//cdn1.lncld.net/static/js/3.0.4/av-min.js"></script>
<script src='//unpkg.com/valine@1.3.4/dist/Valine.min.js'></script>
<script src="/js/botui.js"></script>
<!-- 不蒜子 网页计数器 -->
<script src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.4.2/tocbot.min.js"></script> -->
<script type="text/javascript">
/* <![CDATA[ */
if (/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)) {
  var Poi = {"pjax":"1","movies":{"url": "https://cdn.jsdelivr.net/gh/honjun/hojun@1.2","name":"Unbroken.mp4","live":"close"},"windowheight":"fixed","codelamp":"close","ajaxurl":"","order":"asc","formpostion":"bottom"};
} else {
  var Poi = {"pjax":"1","movies":{"url": "https://cdn.jsdelivr.net/gh/honjun/hojun@1.2","name":"Unbroken.mp4","live":"open"},"windowheight":"auto","codelamp":"close","ajaxurl":"","order":"asc","formpostion":"bottom"};
}
/* ]]> */

</script>
<script>
$(document).ready(function() {
  if ($(".toc").length > 0 && document.body.clientWidth > 1200) {
    if ($(".pattern-center").length > 0) { //有图的情况
      tocbot.init({
          // Where to render the table of contents.
          tocSelector: '.toc', // 放置目录的容器
          // Where to grab the headings to build the table of contents.
          contentSelector: '.entry-content', // 正文内容所在
          // Which headings to grab inside of the contentSelector element.
          scrollSmooth: true,
          headingSelector: 'h1, h2, h3, h4, h5', // 需要索引的标题级别
          headingsOffset: -400,
          scrollSmoothOffset: -85
      });
    } else {
      tocbot.init({
          // Where to render the table of contents.
          tocSelector: '.toc', // 放置目录的容器
          // Where to grab the headings to build the table of contents.
          contentSelector: '.entry-content', // 正文内容所在
          // Which headings to grab inside of the contentSelector element.
          scrollSmooth: true,
          headingSelector: 'h1, h2, h3, h4, h5', // 需要索引的标题级别
          headingsOffset: -85,
          scrollSmoothOffset: -85
      });
    }
    var offsetTop = $('.toc').offset().top - 95;
    window.onscroll = function() {
      var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
      if (scrollTop >= offsetTop) {
        $('.toc').addClass('toc-fixed');
      } else {
        $('.toc').removeClass('toc-fixed');
      }
    }
  }
});
</script>

    <div class="openNav no-select" style="height: 50px;">
      <div class="iconflat no-select" style="width: 50px; height: 50px;">
        <div class="icon"></div>
      </div>
      <div class="site-branding search-form-submit">
        <i class="iconfont js-toggle-search iconsearch icon-search"></i>
      </div>
    </div>
  </section>
  <div id="mo-nav" class="">
  <div class="m-avatar">
    <img src="https://cdn.jsdelivr.net/gh/inksmallfrog/cdn@master/img/avators/conan.jpg">
  </div>
  <p style="text-align: center; color: #333; font-weight: 900; font-family: 'Ubuntu', sans-serif; letter-spacing: 1.5px">さくら荘その小蛙</p>
  <p style="text-align: center; word-spacing: 20px;">
    
      
        <a href="http://github.com/inksmallfrog" class="fa fa-github" target="_blank" style="color: #333; margin-left:20px"></a>
      
        <a href="http://weibo.com/inksmallfrog?is_all=1" class="fa fa-weibo" target="_blank" style="color: #dd4b39; margin-left:20px"></a>
      
        <a href="https://wpa.qq.com/msgrd?v=3&uin=327720269&site=qq&menu=yes" class="fa fa-qq" target="_blank" style="color: #25c6fe; margin-left:20px"></a>
      
    
  </p>
  <ul id="menu-new-1" class="menu">
    
      <li>
        <a href="/">
          <span class="faa-parent animated-hover">
            <i class="fa  fa-fort-awesome faa-shake" aria-hidden="true"></i>
            首页
          </span>
        </a>
        
      </li>
    
      <li>
        <a href="/archives">
          <span class="faa-parent animated-hover">
            <i class="fa  fa-archive faa-shake" aria-hidden="true"></i>
            归档
          </span>
        </a>
        
          <ul class="sub-menu">
            
              <li>
                <a href="/categories/技术/">
                  <i class="fa fa-code" aria-hidden="true"></i>
                  技术
                </a>
              </li>
            
              <li>
                <a href="/categories/生活/">
                  <i class="fa fa-file-text-o" aria-hidden="true"></i>
                  生活
                </a>
              </li>
            
          </ul>
        
      </li>
    
      <li>
        <a href="javascript:;">
          <span class="faa-parent animated-hover">
            <i class="fa  fa-list-ul faa-vertical" aria-hidden="true"></i>
            清单
          </span>
        </a>
        
          <ul class="sub-menu">
            
              <li>
                <a href="/tags/悦读/">
                  <i class="fa fa-th-list faa-bounce" aria-hidden="true"></i>
                  书单
                </a>
              </li>
            
              <li>
                <a href="/bangumi/">
                  <i class="fa fa-film faa-vertical" aria-hidden="true"></i>
                  番组
                </a>
              </li>
            
              <li>
                <a href="/music/">
                  <i class="fa fa-headphones" aria-hidden="true"></i>
                  歌单
                </a>
              </li>
            
              <li>
                <a href="/tags/图集/">
                  <i class="fa fa-photo" aria-hidden="true"></i>
                  图集
                </a>
              </li>
            
          </ul>
        
      </li>
    
      <li>
        <a href="/comment/">
          <span class="faa-parent animated-hover">
            <i class="fa  fa-pencil-square-o faa-tada" aria-hidden="true"></i>
            留言板
          </span>
        </a>
        
      </li>
    
      <li>
        <a href="/links/">
          <span class="faa-parent animated-hover">
            <i class="fa  fa-link faa-shake" aria-hidden="true"></i>
            友人帐
          </span>
        </a>
        
      </li>
    
      <li>
        <a href="/">
          <span class="faa-parent animated-hover">
            <i class="fa  fa-leaf faa-wrench" aria-hidden="true"></i>
            关于
          </span>
        </a>
        
          <ul class="sub-menu">
            
              <li>
                <a href="/about/">
                  <i class="fa fa-meetup" aria-hidden="true"></i>
                  我？
                </a>
              </li>
            
              <li>
                <a href="/theme-sakura/">
                  <i class="fa iconfont icon-sakura" aria-hidden="true"></i>
                  主题
                </a>
              </li>
            
              <li>
                <a href="/lab/">
                  <i class="fa fa-cogs" aria-hidden="true"></i>
                  Lab
                </a>
              </li>
            
          </ul>
        
      </li>
    
      <li>
        <a href="/atom.xml">
          <span class="faa-parent animated-hover">
            <i class="fa  fa-rss faa-pulse" aria-hidden="true"></i>
            RSS
          </span>
        </a>
        
      </li>
    
  </ul>
  <p style="text-align: center; font-size: 13px; color: #b9b9b9;">&copy 2019 hexo-sakura</p>
</div>
<button onclick="topFunction()" class="mobile-cd-top" id="moblieGoTop" title="Go to top" style="display: none;"><i class="fa fa-chevron-up" aria-hidden="true"></i></button>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css">
<script src="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js"></script>
<!-- require MetingJS -->
<script src="https://cdn.jsdelivr.net/npm/meting@2/dist/Meting.min.js"></script>
<style>
  .aplayer .aplayer-lrc {
    height: 35px;
  }
  .aplayer .aplayer-lrc p{
    font-size: 16px;
    font-weight: 700;
    line-height: 18px !important;
  }
  .aplayer .aplayer-lrc p.aplayer-lrc-current{
    color: #FF1493;
  }
  .aplayer.aplayer-narrow .aplayer-body{
    left: -66px !important;
  }
  .aplayer.aplayer-fixed .aplayer-lrc {
    display: none;
  }
  .aplayer .aplayer-lrc.aplayer-lrc-hide {
      display:none !important;
  }
  .aplayer.aplayer-fixed .lrc-show {
    display: block;
    background: rgba(255, 255, 255, 0.8);
  }
</style>
<meting-js

    id="2660651585"

    server="netease"

    type="playlist"

    fixed="true"

    autoplay="false"

    loop="all"

    order="random"

    preload="auto"

    volume="0.7"

    mutex="true"

</meting-js>
<script>
  $(function(){
    $('body').on('click', '.aplayer', function(){
      if($('.aplayer-button').hasClass('aplayer-play')) {
        $('.aplayer-lrc').removeClass('lrc-show');
      } else {
        $('.aplayer-lrc').addClass('lrc-show');
      }
    })
  });
</script>
</body>
</html>